<template>
        <EdDialog :width="'460px'" :title="item.title"  v-if="visible" :ref="item.ref" @close-dialog="close" @save-dialog="save">
            <div class='change_box'>
                <div class="box_title">{{title_text}}</div>
                <div class="box_list" v-if="data.length>0">
                    <div :class="['box_item', radio==item.id ? 'selected' : '' ]" v-for="item in data" :key="item.id">
                        <el-radio v-model="radio" :label="item.id">
                            <span class="name">{{item.name}}</span>
                            <span class="village">（{{item.orgName}}）</span>
                            <span class="phone">{{item.mobile}}</span>
                            <!-- <div class="job">{{item.job}}</div> -->
                        </el-radio>
                    </div>
                </div>
                <div v-else class="no_data">无数据</div>
            </div>
        </EdDialog>
</template>

<script>
    import EdDialog from 'src/components/EdDialog.vue';
    import { getrRepairerData } from "./api.js";
    export default{
        name: 'assignDialog', 
        components: { EdDialog},
        props: {
            isShow: {
                type:Boolean,
                required: true,
                default: false,
            },
            item: {
                type:Object,
                required: false,
                default: ()=>{
                    return {
                        title: '指派接单人',
                        identification: 'changeDialog',
                        ref: 'changeDialog',
                    }
                }
            },
            title_text: {
                type: String,
                required: false,
                default: ()=>{
                    return '工单指派给'
                }
            },
            changeParams: {
                type: Object,
                default:function () {
                    return null;
                }
            }
        },
        watch:{
            changeParams(val){
                getrRepairerData(val).then((res) =>{
                    this.data = res.data;
                })
            }
        },
        computed:{
            visible(){
                return this.isShow
            },
        },
        data(){
            return{
                loading:false,
                radio: '',
                data: [],
            }
        },
        methods: {
            reset(){
                this.loading = false;
                this.radio = '';
                this.data = [];
            },
            close(){
                this.$emit("close-dialog");
                this.reset();
            },
            cancelStatus(){
                this.$refs.changeDialog.hideLoading()
            },
            save(){
                // this.loading = true;
                let obj = this.data.find((v, i) => {
                    return v.id == this.radio
                })
                this.$emit("save-dialog", obj);
                this.reset();
            }
        }
    }
</script>

<style  scoped lang="scss">
    :deep .change_box{
        width: 100%;
        border: 1px solid #E4E7ED;
        .box_title{
            width: 100%;
            height: 64px;
            background: #F4F4F4;
            border: 1px solid #E4E7ED;
            padding: 21px 0 21px 12px;
        }
        .box_list{
            height: 360px;
            overflow-y: scroll;
            &::-webkit-scrollbar-thumb{
                background-color: #C1C1C1;
                border-radius: 2px;
            }
            // &::-webkit-scrollbar-track {

            //     background-color: green;
            // }

            // &::-webkit-scrollbar {
            //     width: 20px;
            // }
            .box_item{
                padding: 15px 30px 10px 10px;
                font-family: 'Noto Sans SC';
                font-style: normal;
                font-weight: 400;
                line-height: 22px;
                .name{
                    font-size: 14px;
                    color: #606266;
                }
                .phone{
                    font-size: 14px;
                    color: #909399;
                }
                .village{
                    // margin-left: 24px;
                    margin-top: 10px;
                    font-size: 14px;
                    color: #909399;
                }
            }
            .box_item.selected{
                background-color: #FEF9F0;           
            }
            .el-radio__input.is-checked + .el-radio__label{
                // background-color: #FEF9F0;           
            }
            .el-radio__input.is-checked .el-radio__inner{
                border-color: #EED096;
                background-color: #EED096;
            }
        }
        .no_data{
            height: 360px;
            color: #909399;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>